import React from 'react';
import './../styles/Main.scss';

import {sortApi} from '../apis/sort.js';
import {Navbar,Nav,NavItem,NavDropdown,MenuItem} from 'react-bootstrap';
//主页菜单
var Main = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired
  },
  getInitialState: function () {
    return {
      sorts:[]
    };
  },
  componentWillMount: function() {
	
		  
		this.setState({
		  sorts :sortApi.getSorts()
        });
		
  },
  render: function() {
	 
	
    return (
      <div>
        
          <div className="container-fluid">
		    <Navbar>
              <Nav>
			       <NavItem href="#/">首页</NavItem>
	               {
			           this.state.sorts.map(function (sort) {
						     
							 if(sort.list && sort.list.length>0){
								 return (
								   <NavDropdown  title={sort.sortname} >
								   {
								    sort.list.map(function(item){
										var url ="#/sort/"+item.id+"/"+item.sortname+"/1/10"
										return (
										   <MenuItem href={url}>{item.sortname}</MenuItem>
										)
									})
								   }
								   </NavDropdown>
								 )
							 }
							 else
							 {
							  var url ="#/sort/"+sort.id+"/"+sort.sortname+"/1/10"
                              return ( 
							   <NavItem  href={url}>{sort.sortname}</NavItem>
							  )
							 }
                       })
			       }
              </Nav>
            </Navbar>
            
          </div>
        
        <div className='container-fluid'>
          {this.props.children}
        </div>
      </div>
    );
  }
});

export {Main}